import { Button, Tag } from "@alifd/next";
import { Radio, Range } from "@alifd/next";
import { useEffect, useState } from "react";
const RadioGroup = Radio.Group;
export default function ChooseTimeLine(props: {
    value: number[],
    onChange: any
}) {
    const [step, setStep] = useState(1);
    const [innerValue, setInnerValue] = useState(props.value ? props.value : [1, 1 + step]);
    useEffect(() => {
    }, [innerValue]);
    return <div style={{
        width: '100%',
    }}>
        <Range fixedWidth step={1} min={0} max={23} value={innerValue} marks={
            [...new Array(24).keys()]
        } onChange={(value) => {
            setInnerValue(value);
            props.onChange && props.onChange(value);
        }} />
        <br />
        <RadioGroup onChange={(value) => {
            let tempValue = [innerValue[0], innerValue[0] + value];
            setInnerValue(tempValue);
            props.onChange && props.onChange(tempValue);
        }}>
            <Radio value={1}>1h</Radio>
            <Radio value={2}>2h</Radio>
            <Radio value={3}>3h</Radio>
        </RadioGroup>
        <Button onClick={() => {
            setInnerValue([1, 2]);
            props.onChange && props.onChange(null);
        }}>重置选择</Button>
    </div>
}